<!--# layout("/common/layout.html",{"jsBase":"/js/content/resContentChapter/"}){ -->

<form class="layui-form layui-form-pane" id="addForm" enctype="multipart/form-data" lay-filter="editform">
    <input type="hidden" name="chapterId" id="chapterId">
    <input type="hidden" name="contentId" id="contentId" value="${contentId!}"/>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">课程标题</label>
                <div class="layui-input-inline" style="width:512px">
                    ${contentMain.contentTitle}
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">章节标题</label>
                <div class="layui-input-inline" style="width:512px">
                    <input type="text" name="chapterTitle" id="chapterTitle" autocomplete="off" class="layui-input"
                           lay-verify="required">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">章节序号</label>
                <div class="layui-input-inline">
                    <input type="text" name="chapterNo" id="chapterNo" autocomplete="off" class="layui-input"
                           lay-verify="required|number">
                </div>
            </div>

        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">是否免费</label>
                <div class="layui-input-inline">
                    <input type="radio" name="freeFlag" value="1" title="是">
                    <input type="radio" name="freeFlag" value="0" title="否">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">是否可用</label>
                <div class="layui-input-inline">
                    <input type="radio" name="chapterStatus" value="1" title="是">
                    <input type="radio" name="chapterStatus" value="0" title="否">
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" id="author" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">价格(元)</label>
                <div class="layui-input-inline">
                    <input type="text" name="chapterPrice" id="chapterPrice" autocomplete="off" class="layui-input"
                           lay-verify="required|number">
                </div>

            </div>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">播放时长(秒)</label>
                <div class="layui-input-inline">
                    <input type="text" name="chapterDuration" id="chapterDuration" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width:115px">试看时长(秒)</label>
                <div class="layui-input-inline">
                    <input type="text" name="freeDuration" id="freeDuration" autocomplete="off" class="layui-input"
                           lay-verify="required|number">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="hidden" name="filePath" id="filePath"/>
                    <button type="button" class="layui-btn" id="chooseFile">
                        <i class="layui-icon">&#xe67c;</i>上传视频
                    </button>
                </div>
                <div class="layui-input-inline file_link" id="filePathLink">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
        </div>
    </div>

    <layui:submitButtons id="addButton"/>
</form>
<!--#} -->
<script>
    var form;
    layui.define(['form', 'laydate', 'table', 'resContentChapterApi', 'upload', 'element'], function (exports) {
        form = layui.form;
        var resContentChapterApi = layui.resContentChapterApi;
        var index = layui.index;
        var isNew = true;
        var upload = layui.upload;
        var element = layui.element;
        <!--# if(!(isEmpty(resContentChapter.chapterId))){  -->
        isNew = false;
        <!--# } -->
        var view = {
            init: function () {
                Lib.initGenrealForm($("#addForm"), form);
                this.initSubmit();
                this.initUpload();
            },
            initSubmit: function () {
                $("#addButton").click(function () {
                    form.on('submit(form)', function () {
                        resContentChapterApi.saveForm(isNew, $('#addForm'), function () {
                            parent.window.dataReload();
                            Common.info("保存成功");
                            Lib.closeFrame();
                        });
                    });
                });

                $("#addButton-cancel").click(function () {
                    Lib.closeFrame();
                });
            },
            initUpload: function () {
                element.init();
                upload.render({
                    elem: "#chooseFile",
                    url: "./upload.json",
                    data: {
                        chapterId: function() {return $("#chapterId").val()},
                        contentId: $("#contentId").val(),
                        filePath: function() {return $("#filePath").val()}
                    },
                    accept: "video",
                    exts: "mp4",
                    auto: false,
                    field: "file",
                    size: 524288,
                    progress: function (e, percent) {
                        element.progress('progressBar', percent + '%');
                    },
                    choose: function (obj) {
                        var files = obj.pushFile();
                        layui.each(files, function (index, file) {
                            Common.openConfirm("确定上传文件： " + file.name, function () {
                                obj.upload(index, file);
                            }, function () {

                            });
                        });
                    },
                    done: function (res, index, upload) {
                        if (res.code == 0) {
                            $("#filePath").val(res.data);
                            var linkDiv = $("#filePathLink");
                            var linka = linkDiv.find("a")[0];

                            var linkUrl = "${fileUrlPrefix}"+res.data;
                            if (linka) {
                                $(linka).attr("href",linkUrl);
                            } else {
                                var a = document.createElement('a');
                                var aJq = $(a);
                                aJq.html("下载视频文件");
                                aJq.attr("href", linkUrl);
                                aJq.attr("target", "_blank");
                                linkDiv.append(aJq);
                            }


                        }
                    },
                    error: function (index, upload) {

                    }
                });
            }

        }
        view.init();
        <!--# if(!(isEmpty(resContentChapterJson))){  -->
        var formJson = ${resContentChapterJson};
        form.val("editform", formJson);
        <!--# } -->
        <!--# if(!(isEmpty(resContentChapter.chapterId))) { -->
        $(".file_link").each(function () {
            var a = document.createElement('a');
            var aJq = $(a);
            var filePath = $(this).attr("id");
            aJq.html("下载视频文件");
            aJq.attr("href", formJson[filePath]);
            aJq.attr("target", "_blank");
            $(this).append(aJq);
        });
        <!--# } -->
    });

</script>
